<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>病人办卡</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <!-- 查询条件 -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item >
                <div class="block">
                    <el-input  v-model="names" placeholder="请输入姓名"></el-input>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="doSearch">查询</el-button>
                <el-button type="success" circle icon="el-icon-plus" @click="showAddDialog=true"></el-button>
            </el-form-item>
        </el-form>
        <!-- 数据 -->
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column prop="patientId" label="病人ID" width="180">
            </el-table-column>
            <el-table-column prop="patientName" label="病人姓名" >
            </el-table-column>
            <el-table-column prop="patientIdCard" label="身份证号码" >
            </el-table-column>
            <el-table-column prop="patientPhoneNumber" label="手机号码" >
            </el-table-column>
            <el-table-column prop="patientAddress" label="地址" width="180">
            </el-table-column>
            <el-table-column prop="patientSex" label="性别" >
            </el-table-column>
            <el-table-column prop="patientAge" label="年龄">
            </el-table-column>
            <el-table-column prop="medicalCardId" label="卡编号" >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="220">
                <template slot-scope="scope">
                    <el-button type="text"  size="small" @click="upgrade(scope.row)">修改信息</el-button>
                    <el-button type="text"  size="small" @click="updatePatient(scope.row)">补卡/退卡</el-button>
                    <el-button type="text"  size="small" @click="insertCard(scope.row)">办卡</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
                layout="prev, pager, next" :current-page="curr"
                :total="totalCount" size="10" @current-change="jump">
        </el-pagination>
       <!-- 修改信息-->
        <el-dialog
                title="修改信息"
                :visible.sync="showDialog"
                width="30%"
        >
        <div style="width: 300px">
            <el-form :model="medical"  label-width="100px"  class="demo-ruleForm">

            <el-form-item label="身份证号码" prop="name">
                <el-input :disabled="true" v-model="medical.patientIdCard" ></el-input><!--@blur="move"-->
            </el-form-item>
                <el-form-item label="姓名"  prop="name">
                    <el-input  v-model="medical.patientName"></el-input>
                </el-form-item>
                <el-form-item label="性别"  prop="name">
                    <el-input :disabled="true" v-model="medical.patientSex"></el-input>
                </el-form-item>
                <el-form-item label="年龄"  prop="name">
                    <el-input  v-model="medical.patientAge"></el-input>
                </el-form-item>
                <el-form-item label="地址"  prop="name">
                    <el-input  v-model="medical.patientAddress"></el-input>
                </el-form-item>
                <el-form-item label="职业"  prop="name">
                    <el-input  v-model="medical.patientOccupation"></el-input>
                </el-form-item>
                <el-form-item label="电话号"  prop="name">
                    <el-input  v-model="medical.patientPhoneNumber"></el-input>
                </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifi">修改信息</el-button>
                </el-form-item>
            </el-form>
        </div>
        </el-dialog>
        <el-dialog
                title="补卡/退卡"
                :visible.sync="showUpdaDialog"
                width="30%"
        >
            <div style="width: 300px">
                <el-form :model="medical"  label-width="100px"  class="demo-ruleForm">

                    <el-form-item label="身份证号码" prop="name">
                        <el-input :disabled="true" v-model="medical.patientIdCard" ></el-input><!--@blur="move"-->
                    </el-form-item>
                    <el-form-item label="姓名"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientName"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientAge"></el-input>
                    </el-form-item>
                    <el-form-item label="性别"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientSex"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientPhoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="reissue">补卡</el-button>
                        <el-button type="primary" @click="dele">退卡</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog
                title="办卡"
                :visible.sync="showinsertDialog"
                width="30%"
        >
            <div style="width: 300px">
                <el-form :model="medical"  label-width="100px"  class="demo-ruleForm">

                    <el-form-item label="身份证号码" prop="name">
                        <el-input :disabled="true" v-model="medical.patientIdCard" ></el-input><!--@blur="move"-->
                    </el-form-item>
                    <el-form-item label="姓名"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientName"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientAge"></el-input>
                    </el-form-item>
                    <el-form-item label="性别"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientSex"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号"  prop="name">
                        <el-input :disabled="true" v-model="medical.patientPhoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submit">办卡</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog
                title="新增病人信息"
                :visible.sync="showAddDialog"
                width="30%"
        >
            <div style="width: 300px">
                <el-form :model="medical"  label-width="100px"  class="demo-ruleForm">

                    <el-form-item label="身份证号码" prop="name">
                        <el-input  v-model="medical.patientIdCard" ></el-input><!--@blur="move"-->
                    </el-form-item>
                    <el-form-item label="姓名"  prop="name">
                        <el-input  v-model="medical.patientName"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄"  prop="name">
                        <el-input  v-model="medical.patientAge"></el-input>
                    </el-form-item>
                    <el-form-item label="性别"  prop="name">
                        <el-input  v-model="medical.patientSex"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号"  prop="name">
                        <el-input  v-model="medical.patientPhoneNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="地址"  prop="name">
                        <el-input  v-model="medical.patientAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="职业"  prop="name">
                        <el-input  v-model="medical.patientOccupation"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addPatient">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                medical:{
                    patientName:'',
                    patientIdCard:'',
                    patientAddress:'',
                    patientOccupation:'',
                    patientPhoneNumber:'',
                    patientId:'',
                    patientSex:'',
                    patientAge:'',

                },
                tableData: [],
                names:'',
                totalCount:0,
                curr:1,
                showUpdaDialog:false,
                showDialog:false,
                showinsertDialog:false,
                showAddDialog:false
            },
            methods:{
                addPatient:function(){
                    var vm=this;
                    axios.post('/medical/patient/addpatient',vm.medical).then(function(resp){
                        vm.showAddDialog=false;
                       console.log(resp.data)
                        alert(resp.data.message)

                    })
                },
                submit:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("patientId",vm.medical.patientId);
                    axios.post('/medical/medical-card/insertCard',formData).then(
                        function (resp) {
                            vm.showinsertDialog=false;
                            alert(resp.data.message);
                        }
                    )
                },
                modifi:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("patientId",vm.medical.patientId);
                    formData.append("patientName",vm.medical.patientName);
                    formData.append("patientAddress",vm.medical.patientAddress);
                    formData.append("patientOccupation",vm.medical.patientOccupation);
                    formData.append("patientPhoneNumber",vm.medical.patientPhoneNumber);
                    formData.append("patientSex",vm.medical.patientSex);
                    formData.append("patientAge",vm.medical.patientAge);
                    axios.post('/medical/patient/updateById',formData).then(function (resp) {
                        vm.showDialog=false;
                        alert(resp.data.message);
                    })
                },
                reissue:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("patientId",vm.medical.patientId);
                    axios.post('/medical/medical-card/updateCard',formData).then(
                        function (resp) {
                            if(resp.data.success){
                                vm.showUpdaDialog=false;
                                alert(resp.data.message);
                            }

                        }
                    )
                },
                dele:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("patientId",vm.medical.patientId);
                    axios.post('/medical/medical-card/deleteCard',formData).then(
                        function (resp) {
                            if(resp.data.success){
                                vm.showUpdaDialog=false;
                                alert(resp.data.message);
                            }

                        }
                    )
                },
                /*move:function(){
                    var vm=this;
                    const formData=new FormData();
                    formData.append("card",vm.medical.patientIdCard);

                    axios.post('/medical/medical-card/selectMessage',formData).then(
                        function (resp) {
                            console.log(resp);
                            if(resp.data.success){
                                vm.medical=resp.data.data;
                            }else{
                                alert(resp.data.message);
                                vm.medical.patientName='';
                                vm.medical.patientSex='';
                                vm.medical.patientAge='';
                                vm.medical.patientPhoneNumber='';
                            }
                        }
                    )
                },*/
                doSearch:function(){
                    var vm = this;
                    var params={name:vm.names}
                    this.doPageQuery(params);
                },
                jump:function(curr){
                    console.log(curr);
                    var vm = this;
                    var params={name:vm.names,pageIdx:curr};
                    //向后端发请求
                    this.doPageQuery(params);
                },
                doPageQuery:function(params){
                    var vm =this;
                    axios.get('/medical/patient/list', {params: params})
                        .then(function (resp) {
                            console.log(resp.data);
                            //页面数据
                            vm.tableData = resp.data.records;
                            //总条数
                            vm.totalCount = resp.data.total;
                            //当前页
                            vm.curr = resp.data.current;

                        });
                },
                upgrade:function(row){
                    this.medical=row;
                    this.showDialog=true;

                },
                updatePatient:function(row){
                    var vm=this;
                    if(row.medicalCardId==-1|row.medicalCardId==null){
                        alert("你当前没有办卡，无法补卡或退卡，请先办卡");
                    }else{
                        vm.medical=row;
                        vm.showUpdaDialog=true;
                    }
                },
                insertCard:function (row) {
                    var vm=this;
                    if(row.medicalCardId>0){
                        alert("你的卡处于正常状态，无法再次办卡");
                    }else{
                        vm.medical=row;
                        vm.showinsertDialog=true;
                    }

                }
            },

            mounted: function () {

                this.doPageQuery({});
            }
        });
    </script>
</body>
</html>